<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>翻书效果</title>
    <style>
      .book {
        width: 300px;
        height: 400px;
        margin: 100px auto;
        /* 透视的视距 */
        perspective: 1000px;
        position: relative;
      }

      /* 等下翻页，翻转的就是这个盒子 */
      .page {
        width: 300px;
        height: 400px;
        /* 定位 */
        position: absolute;
        left: 0;
        top: 0;
        /* 子元素在3D空间中呈现 */
        transform-style: preserve-3d;
        /* 旋转的基点为左边中间 */
        transform-origin: 0 50%;
        /* 过渡动画 */
        transition: all 2s;
      }

      /* 每页宽和高 */
      .page-item {
        width: inherit;
        height: inherit;
      }

      /* 正面背景色 */
      .front {
        background-color: powderblue;
        z-index: 2;
      }

      /* 反面 样式  */
      .back {
        background-color: tomato;
        position: absolute;
        top: 0;
        bottom: 0;
        /* z-index: -1; */
        /* 延z轴向后移动1像素，相当于z轴底下一层*/
        /* 初始就要设置成反面的状态，然后绕Y轴旋转-180deg，就成正面 位移和旋转注意顺序*/
        transform: translateZ(-1px) rotateY(-180deg);
      }

      /* 鼠标滑到书上，让第一页沿着Y轴旋转-180deg*/
      .book:hover .first {
        /* 绕Y轴旋转-180deg */
        transform: rotateY(-180deg);
      }
    </style>
  </head>
  <body>
    <div class="book">
      <!-- 每一页分 正面 和 反面 两部分 -->
      <div class="page first" style="z-index: 2">
        <!-- 每页正面  -->
        <div class="page-item front">
          <img src="https://picsum.photos/300/400?random=1" alt="image" />
        </div>
        <!-- 每页反面 -->
        <div class="page-item back">
          <img src="https://picsum.photos/300/400?random=2" alt="image" />
        </div>
      </div>
      <!-- 底页内页 -->
      <div class="page">
        <img src="https://picsum.photos/300/400?random=3" alt="image" />
      </div>
      <!-- 不显示底页正面 -->
    </div>
  </body>
</html>
